<template>
    <div class="left-panel">
      <div class="one-line title">{{caseName}}</div>
      <div class="request">{{caseRequest}}</div>
      <div class="subject-num">题量：{{trainingNum}}</div>
      <div class="divider"></div>
      <span class="history-title">历史得分趋势</span>
      <div id="echarts"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'leftPanel',
  data () {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          // 设置Y轴最大值
          max: 120
        },
        series: [
          {
            name: '今日课程学习时长',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#009CF6',
                lineStyle: {
                  color: '#009CF6'
                }
              }
            },
            data: [],
            label: {
              show: true
            }
          }
        ]
      }
    }
  },
  props: {
    caseName: String,
    caseRequest: String,
    trainingNum: Number,
    trainingRankList: Array
  },
  methods: {
    echartInit () {
      this.option.xAxis.data = this.trainingRankList.map(el => {
        return el.finishedTime
      }).reverse()
      this.option.series[0].data = this.trainingRankList.map(el => {
        return el.score
      }).reverse()

      const myChart = echarts.init(document.getElementById('echarts'))
      myChart.setOption(this.option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  },
  mounted () {
    this.echartInit()
  }
}
</script>

<style scoped lang="scss">
.left-panel{
  width: 452px;
  height: 100%;
  background:rgba(255,255,255,1);
  border:1px solid rgba(229,229,229,1);
  border-radius:3px;
  box-sizing: border-box;
  padding: 20px;
  .title{
    width: 100%;
    font-size:22px;
    line-height: 42px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(16,29,55,1);
  }
  .request{
    width: 100%;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(16,29,55,1);
    line-height:22px;
  }
  .subject-num{
    font-size:14px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(145,149,154,1);
    line-height:52px;
  }
  .divider{
    width: 100%;
    height: 1px;
    background-color: #E5E5E5;
    margin-bottom: 20px;
  }
  .history-title{
    font-size:22px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(16,29,55,1);
  }
  #echarts{
    width: 100%;
    height: 400px;
  }
}
</style>
